<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #wai {
            /* border: 1px solid #000; */
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            /* margin: 50px auto; */
            /* background: -webkit-linear-gradient(top, #000, #fff); */
            /* background: url(./images/2.jpg) no-repeat center; */
            background-color: #000;
        }

        #box {
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            position: absolute;
            bottom: 15%;
            left: 50%;
            /* background: url(1.png); */
            background-color: #fff;

        }

        .box1 {
            width: 30px;
            height: 30px;
            /* border: 1px solid #000; */
            display: inline-block;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top: -30px;
            box-shadow: 0px 0px 20px rgb(255, 255, 255);

        }

        /* 
        div::after {
            content: '';
            display: block;
            border: 2px solid #000;
            height: 4px;
            width: 0;
            position: absolute;
            bottom: 15%;
            left: 50%;
            height: availHeight;
        } */
    </style>
</head>

<body>
    <div id="wai">
        <div id="box"></div>
        <!-- <div id="box1"></div> -->
    </div>
    <script src="./lib/jquery-1.11.3/jquery.js"></script>
    <script>
        let i = 0;
        let j = 0;
        document.onkeydown = function (a) {
            if (a.keyCode == 68) {
                i += 30;
                document.getElementById(
                    "box"
                ).style = `transform: translate(${i}px,${j}px)`;
            } else if (a.keyCode == 65) {
                i -= 30;
                document.getElementById(
                    "box"
                ).style = `transform: translate(${i}px,${j}px)`;
            } else if (a.keyCode == 87) {
                j -= 30;
                document.getElementById(
                    "box"
                ).style = `transform: translate(${i}px,${j}px)`;
            } else if (a.keyCode == 83) {
                j += 30;
                document.getElementById(
                    "box"
                ).style = `transform: translate(${i}px,${j}px)`;
            } else if (a.keyCode == 74) {
                j -= 30;
                document.getElementById(
                    "box"
                ).style = `transform: translate(${i}px,${j}px)`;
                setTimeout(function () {
                    j += 30;
                    document.getElementById(
                        "box"
                    ).style = `transform: translate(${i}px,${j}px)`;
                }, 1000);
            }
            let box = document.getElementById("box")
            let topnew = box.offsetTop;
            let leftnew = box.offsetLeft;
            let bottomnew = box.offsetTop + box.offsetHeight;
            let rightnew = box.offsetLeft + box.offsetWidth;
            console.log(topnew, leftnew, bottomnew, rightnew);
        };



        setInterval(function () {

            $('#box').mouseenter(function () {
                let box = document.getElementById('box')
                let topnew = box.offsetTop;
                let leftnew = box.offsetLeft;
                let bottomnew = box.offsetTop + box.offsetHeight;
                let rightnew = box.offsetLeft + box.offsetWidth;
                console.log(topnew, leftnew, bottomnew, rightnew);
            })

        })

        鼠标移动事件
        let wai = document.getElementById("wai");
        wai.addEventListener("mousemove", function (e) {
            console.log(e.offsetX, e.offsetY);
            document.getElementById("box").style = `margin-top: ${e.offsetY}px;margin-left: ${e.offsetX}px;`;
        });
    </script>
</body>

</html>